﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Portal 门户</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /><link href="../demo.css" rel="stylesheet" type="text/css" />

    
    <script src="../../scripts/boot.js" type="text/javascript"></script> 
    
    
    <style>
    
        .mini-panel.max
        {
            position:fixed !important;
            width:100% !important;
            height:100% !important;
            left:0 !important;
            top:0 !important;
            z-index:10000;
        }    
    
    </style>


</head>
<body>
    <h1>Portal 门户</h1>
    <input id="Button1" type="button" value="button1" />
    <input id="Button2" type="button" value="button2" />
    
</body>
</html>
<link href="js/portal.css" rel="stylesheet" type="text/css" />
<script src="js/Portal.js" type="text/javascript"></script>
<script type="text/javascript">

    var portal = new mini.ux.Portal();
    portal.set({
        style: "width: 100%;height:400px",
        columns: [250, "100%", 250]
    });
    portal.render(document.body);

    //panel
    portal.setPanels([
        { column: 0, id: "p1", title: "panel1", showCloseButton: true, body: "#Button1", allowDrag: false, buttons: "collapse max close", onbuttonclick: onbuttonclick },
        { column: 0, id: "p2", title: "panel2", showCollapseButton: true, height: 150, buttons: "collapse max close", onbuttonclick: onbuttonclick },

        { column: 1, id: "p3", title: "panel3", showCloseButton: true, buttons: "collapse max close", onbuttonclick: onbuttonclick },
        { column: 1, id: "p4", title: "panel4", showCollapseButton: true, buttons: "max", onbuttonclick: onbuttonclick },

        { column: 2, id: "p5", title: "panel5", showCloseButton: true, buttons: "max", onbuttonclick: onbuttonclick },
        { column: 2, id: "p6", title: "panel6", showCollapseButton: true, buttons: "max", onbuttonclick: onbuttonclick }
    ]);
    
    var bodyEl = portal.getPanelBodyEl("p2");
    bodyEl.appendChild(document.getElementById("Button2"));

    //获取配置的panels信息
    var panels = portal.getPanels();
    //alert(panels.length);

    /////////////////////////////////////////////////////////////////////////////////

    function maxPanel(id) {
        var panel = mini.get(id);
        panel.maxed = true;
        $(panel.el).addClass("max");
        $(panel.el).find(".mini-tools-max").addClass("mini-tools-restore");
        mini.layout();
    }

    function restorePanel(id) {
        var panel = mini.get(id);
        panel.maxed = false;
        $(panel.el).find(".mini-tools-max").removeClass("mini-tools-restore");
        $(panel.el).removeClass("max");
        mini.layout();
    }

    function onbuttonclick(e) {
        var panel = this;

        if (e.name == "max") {
            if (panel.maxed) {
                restorePanel(panel);
            } else {
                maxPanel(panel);
            }
        }
    }
</script>